<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../layuimini/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../layuimini/css/public.css" media="all">

    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>






<div class="layui-form layuimini-form" id="content">



    <div class="layui-form-item">
        <label class="layui-form-label required">请选择充值的套餐</label>
        <div class="layui-input-block">
            <select name="vid" lay-filter="vid" id="vid">
                <option value=""></option>
            </select>
        </div>
    </div>


    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="saveBtn" id="pay">确认充值</button>
        </div>
    </div>
</div>
<!--注意这些样式文件的路径-->
<script src="../layuimini/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../js/commos.js"></script>
<script>


    layui.use(['form','jquery','layer'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;


        //获取岗位分类信息

        $.ajax({
            url:URL+"vip/list",
            type:"get",
            dataType:"json",
            success:function (result,status,xmlhttp) {
                let $select = $("select[name='vid']");
                $select.empty();
                // $select.append("<option value=\"\"></option>")
                console.log("log",result.data);
                $.each(result.data,function (index,ele) {
                    $select.append("<option value='"+ele.vid+"'>"+ele.description+"-----"+"价格："+ele.price+"元"+"</option>")
                });

                form.render();//修改了表单中的数据需要重新渲染表格
            }

        });

        let vidValue=1;

        form.on('select(vid)', function(data){

            vidValue=data.value;
            // console.log("data.value",data.value)
            console.log("vidValue",vidValue)

        });


        console.log(vidValue);




        $("#pay").click(function () {

            // let $select = $("select[name='vid']");

            $.ajax({
                url:URL+"vip/pay",
                type:"get",
                data:{vid:vidValue,uid:"f0f24449-9082-4a94-ae45-7c8f6710dd09"},
                dataType:"json",
                success:function (result,status,xmlhttp) {

                    if (result.code==0) {


                        let $select = $("#content");
                        // result.data
                        $select.html(result.data)

                    }
                }


            });

        });

    });
</script>
</body>
</html>